<template>
  <div class="tour">
    <div class="header">
        <router-link tag="div" to="/home" class="home">
            <img src="../assets/img/fanhui.png" alt="">
        </router-link>
      <h2>{{datw.title}}</h2>
      <router-link tag="span" to="/search"></router-link>
    </div>
    <!-- 轮播图 -->
    <div class="nav">
      <div class="img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img
              src="https://file.gzl.cn/group1/M00/39/08/wKkBHmAfZjKAXAooAAB9ytfTqKY687.jpg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="https://file.gzl.cn/group1/M00/39/08/wKkBHmAfZjOACIP1AADchhsF39c053.jpg"
              alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <van-divider
    :style="{ color: '#000', borderColor: '#000', padding: '0 110px' }"
    >
    热门目的地
    </van-divider>

    <div class="content">
        <ul>
            <li v-for="item in datwword" :key="item">{{item}}</li>
        </ul>
    </div>

    <van-tabs v-model="activeName">
        <van-tab title="热卖精选" name="a">

            <router-link tag="div" :to="'/page?id='+item.id" class="items" v-for="item in groupList1" :key="item.id">
                <div class="img">
                    <img :src="item.img" alt="">
                    <span>跟团游|广州出发</span>
                </div>
                <div class="word">
                    <div class="top">
                        {{item.title}}
                    </div>
                    <div class="mid">
                        <span v-show="item.name">{{item.name}}</span>
                    </div>
                    <div class="bottom">
                        <span ><i>￥</i>{{item.num}}</span>
                    </div>
                </div>
            </router-link>
            
        </van-tab>
        <van-tab title="玩美冰雪" name="b">
          <router-link tag="div" :to="'/page?id='+item.id" class="items" v-for="item in groupList2" :key="item.id">
                <div class="img">
                    <img :src="item.img" alt="">
                    <span>跟团游|广州出发</span>
                </div>
                <div class="word">
                    <div class="top">
                        {{item.title}}
                    </div>
                    <div class="mid">
                        <span v-show="item.name">{{item.name}}</span>
                    </div>
                    <div class="bottom">
                        <span ><i>￥</i>{{item.num}}</span>
                    </div>
                </div>
            </router-link>
        </van-tab>
        <van-tab title="高铁动车" name="c">
          <router-link tag="div" :to="'/page?id='+item.id" class="items" v-for="item in groupList3" :key="item.id">
                <div class="img">
                    <img :src="item.img" alt="">
                    <span>跟团游|广州出发</span>
                </div>
                <div class="word">
                    <div class="top">
                        {{item.title}}
                    </div>
                    <div class="mid">
                        <span v-show="item.name">{{item.name}}</span>
                    </div>
                    <div class="bottom">
                        <span ><i>￥</i>{{item.num}}</span>
                    </div>
                </div>
            </router-link>
        </van-tab>
    </van-tabs>

    
  </div>
</template>

<script>
import {getgroupList} from "../assets/api/group";
export default {
  props:['travelList'],
    data() {
        return {
           activeName: 'a',
           groupList1:null,
           groupList2:null,
           groupList3:null,
           datw:null,
           datwword:null,
        };
    },
    methods:{
      gettravelFun(id){
        let index = this.travelList.findIndex((item)=>item.id==id);
        this.datw = this.travelList[index];
        console.log(this.datw);
        this.datwword = this.datw.word;
      }
    },
    created(){
      getgroupList().then((data) => {
        this.groupList1 = data.groupList[0];
      });
      getgroupList().then((data) => {
        this.groupList2 = data.groupList[1];
      });
      getgroupList().then((data) => {
        this.groupList3 = data.groupList[2];
      });
      this.gettravelFun(this.$route.query.id);
    }
};
</script>

<style lang="scss" scoped>
.tour {
  .header {
    display: flex;
    height: 55px;
    background: #ffd800;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    align-items: center;
    z-index: 100;
    .home{
        width: 20px;
        height: 20px;
        margin-left: 10px;
        img{
            width: 100%;
        }
    }
    h2 {
      flex: 1;
      font-size: 16px;
      font-weight: normal;
      line-height: 55px;
      text-align: center;
    }
    span {
      display: inline-block;
      width: 30px;
      height: 40px;
      background: url(../assets/img/common.png) no-repeat -368px -464px;
      background-size: 400px;
      margin-right: 10px;
    }
  }
  .nav {
    height: 120px;
    width: 100%;
    margin: 55px auto 0 auto;
    .img {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content{
    border-bottom: 16px solid #f5f5f5;
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            color: #404040;
            font-size: 14px;
            width: 24.57%;
            text-align: center;
            border: 0.5px solid #ebebeb;
            border-bottom: none;
            padding: 10px 0;
        }
    }
  }
  .items{
    padding: 4px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    .img{
        width: 150px;
        height: 100px;
        position: relative;
        img{
            width: 100%;
        }
        span{
            display: block;
            position: absolute;
            top: 2px;
            left: 4px;
            background:rgba(0,0,0,0.4);
            color: #fff;
            border: 1px solid transparent;
            border-radius: 20px;
            font-size: 12px;
            padding: 2px 4px;
        }
    }
    .word{
        margin-left: 10px;
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-around;
        .top{
                color: #000;
                font-size: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                white-space: initial;
                height: 40px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                margin-top: 2px;
        }
        .mid{
            span{
                border: 1px solid #00b9ef;
                color: #00b9ef;
                font-size: 12px;
                transform: scale(0.8);
                border-radius: 20px;
                padding: 3px;
                margin-right: 5px;
            }
        }
        .bottom{
          margin-right: 5px;
            span{
                color: #ff8c00;
                font-size: 20px;
                i{
                    font-style: normal;
                    font-size: 12px;
                    
                }
            }
        }
    }
  }
   
}
</style>
